import type React from 'react';
import styles from './index.module.less';

interface ToolbarProps {
  onResetZoom: () => void;
  onToggleZoomMode: () => void;
  currentScale: number;
  zoomMode: 'origin' | 'mouse';
  mouseCoord: { x: number; y: number };
}

const Toolbar: React.FC<ToolbarProps> = ({
  onResetZoom,
  onToggleZoomMode,
  currentScale,
  zoomMode,
  mouseCoord,
}) => {
  return (
    <div className={styles.toolbar}>
      <button
        type="button"
        onClick={onResetZoom}
        className={styles.button}
        title="重置缩放"
      >
        重置缩放
      </button>

      <button
        type="button"
        onClick={onToggleZoomMode}
        className={`${styles.button} ${zoomMode === 'mouse' ? styles.zoomModeButton : ''}`}
        title={`当前缩放模式: ${zoomMode === 'mouse' ? '基于鼠标位置' : '基于原点'}`}
      >
        {zoomMode === 'mouse' ? '鼠标缩放' : '原点缩放'}
      </button>

      <div className={styles.scaleDisplay}>
        缩放: {currentScale.toFixed(12)}x
      </div>

      <div className={styles.coordDisplay}>
        坐标: ({mouseCoord.x.toFixed(3)}, {mouseCoord.y.toFixed(3)})
      </div>
    </div>
  );
};

export default Toolbar;
